<template>
	<view class="" v-if="info.id" style="padding-bottom: 200rpx;">
		<view class="u-flex p15 module-action">
			<view class="act-block" @click="toBack">

				<u-icon name="arrow-left" style="color: #fff;"></u-icon>
			</view>
			<view class="act-block ml10" @click="toHome">

				<u-icon name="home" style="color: #fff;"></u-icon>
			</view>
			<view class="act-block ml10" @click="toCart">
				<u-icon name="shopping-cart" style="color: #fff;"></u-icon>
			</view>
		</view>
		<view>


			<swiper class="swiper" style="height:460px" circular @change="bannerChange">
				<swiper-item v-if="info.file">
					<view v-if="showVideo">

						<video id="myVideo" :autoplay="true" controls :src="info.file"
							style="width: 100%;height:460px"></video>
					</view>
					<view v-else @click="showVideo=true" style="position: relative">
						<view class="ic-video">
							<u-icon name="play-circle"></u-icon>
						</view>
						<image :src="info.picUrl" style="width: 100%;height:460px" mode="aspectFit"></image>
					</view>
				</swiper-item>
				<swiper-item v-for="(item,index) in info.sliderPicUrls" :key="index">
					<image :src="item" style="width: 100%;height:460px" mode="aspectFit"></image>
				</swiper-item>
			</swiper>
			
		</view>
		<view class="p12">
			<view class="u-flex u-f-jsb">
				<view  class="fz20 u-font-bold u-flex" style="color: #70B52C;">
					<span>{{info.point}}</span>积分<span
						v-if="info.price">+<span>{{info.price}}</span>元</span>
				</view>
				<view class="fz12 c9">月销 {{info.salesCount}}</view>
			</view>
			
			<view class="u-flex u-f-jsb mt10">
				<view class="fz14 u-font-bold">{{info.name}}</view>
				
			</view>
		</view>
		<view class="">
			<view class="p12">商品详情</view>
			<u-parse :html="info.description"></u-parse>
		</view>

		
<view class="fixed-bottom p15">
				<view class="u-flex module-next">
					<view class="u-flex u-f-justify u-f1">
						<view class="item fz14" style="text-align: center;">
							<u-icon name="kefu-ermai" class="fz16"></u-icon>
							<view class="fz12">客服</view>
						</view>
					</view>
					<view class="btn-sure" @click="buyNow">立即兑换</view>
				</view>

				
			</view>
		<u-popup  v-model="showArticle" mode="bottom" :closeable="true">
			<view class="pt16">
				<view class="u-flex bm u-f-justify pb15">
					{{articleInfo.title}}
				</view>
				<view class="p15">
					<scroll-view style="height: 700rpx;overflow: auto;">
						<view v-html="articleInfo.content"></view>
					</scroll-view>
				</view>
			</view>
	  </u-popup>
		<u-popup :zIndex="998" :overlayStyle="{  
        zIndex: 997  
      }" v-model="showSku" mode="bottom" :closeable="true">
			<view v-if="showSku">
				<view class="p20">
					<view class="u-f-justify fz14 u-font-bold">选择规格</view>
					<view class="u-flex mt15" style="align-items: flex-start;">
						<image @click="prevImg([curSku.picUrl])" class="" :src="curSku.picUrl || info.picUrl"
							style="width: 180rpx;height: 180rpx;"></image>
						<view class="pl10 u-f1">
							<view class="fz14 u-font-bold u-f-jsb u-flex u-line-1">
								{{info.name}}
							</view>

							<view class="fz12 c9 u-f-jsb u-flex mt5">
								{{curSku.skuName}}
							</view>
							<view style="color: #FE3307;" class="u-font-bold fz16 mt5">
								￥{{curSku.price}}
							</view>
							<view class="f12 c6 mt10">数量</view>
							<view class="u-flex u-f-jsb mt5">
								<view class="">
									<u-number-box :input-width="60" :input-height="50" :min="1" :size="30"
										v-model="skuNum" @change="skuNumChange"></u-number-box>
								</view>

								
							</view>
						</view>
					</view>
					<view class="mt10">
						<u-tabs v-if="cateList.length>1" :list="cateList" active-color="#70B52C" :is-scroll="false" :current="current"
							@change="change"></u-tabs>
						<scroll-view scroll-y="true" class="specs mt20" style="max-height: 600rpx;">
							

								<view class="specs mb16" v-for="(item, index) in info.groupList[current].propertyList"
									:key="index">
									<view class="specs-hd p-20-0">
										<text class="f12 c6">{{ item.propertyName }}</text>
									</view>
									<view class="u-flex" style="flex-wrap: wrap;" v-if="item.valueList">
										<view :class="['sku-item',item.curIndex==index1?'on':'']"
											v-for="(item1,index1) in item.valueList" :key="index1"
											@click="selectSku(index,index1)">
											<image v-if="item1.valuePicture" :src="item1.valuePicture"
												style="width: 100%;height: 100rpx;display: block;margin: 0 0 10rpx;">
											</image>
											{{ item1.valueName }}
										</view>
									</view>
								</view>

						</scroll-view>
					</view>


				</view>
				<view class="module-btn mt10 u-flex p20 bt" v-if="!showDiy">
					<button type="primary" @click="buyNow" style="background: #70B52C;" class="btn brs5 u-f1 mr5">
						<!-- ￥169.95 -->
						立即购买</button>
					<button type="primary" v-if="info.type==1 || info.type==2" @click="showDiy=true"
						style="background: #70B52C;" class="btn brs5 u-f1 ml5">自主DIY</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showSku: false,
				showArticle:false,
				showVideo: false,
				skuNum: 1,
				articleInfo:{},
				isLogin:false,
				cateList: [],
				showSkuType: 1,
				current: 0,
				joinInfo:{},
				showDiy: false,
				curSku: {},
				info: {},
				curTab: -1,

			}
		},
		onLoad(e) {
			this.getInfo(e.id)
		},
		onShow() {
			
					this.$api.articleInfo({id:10}, res => {
						if (res.code == 200) {
							this.articleInfo = res.data
						}
					})
			
					this.$api.articleInfo({id:15}, res => {
						if (res.code == 200) {
							this.joinInfo = res.data
						}
					})
					
					
					if (this.$db.get("userToken")) {
						this.$api.memberInfo({}, res => {
							if (res.code == 200) {
								this.isLogin = true
							}
						})
					
					}
		},

		methods: {
			bannerChange() {
				this.pauseVideo()
			},
			pauseVideo() {
				uni.createSelectorQuery().select('#myVideo').boundingClientRect(function(rect) {
					uni.createVideoContext('myVideo', this).pause();
				}).exec();
			},
			change(e) {
				this.current = e
				this.showDiy = false
			},

			selectSku(idx, idx1) {
				this.getSkuValue(idx, idx1)
			},

			getSkuValue(idx, idx1) {
				let valueIds = []
				this.info.groupList.some((item, index) => {
					item.propertyList.some(item1 => {
						if(idx!=undefined && this.current==index){
							console.log(this.current, idx1,index)
							valueIds.push(item1.valueList[idx1].valueId)
							
						}else{
							valueIds.push(item1.valueList[item1.curIndex].valueId)
						}

					})

				})
				this.$api.productSku({
					spuId: this.info.id,
					valueIds: String(valueIds)
				}, res => {
					if (res.code == 200 && res.data) {
						this.curSku = res.data
						if (idx != undefined) {

							this.info.groupList[this.current].propertyList[idx].curIndex = idx1

						}
					} else {

						uni.showToast({
							title: '当前规格不存在',
							icon: 'none'
						});
					}
				})

			},
			getInfo(id) {
				this.$api.productInfo({
					id
				}, res => {
					if (res.code == 200) {
						this.info = res.data
						if(this.info.skuList.length>0){
							this.curSku=this.info.skuList[0]
						}
						
						// this.cateList = []
						// this.info.skuList.some(item => {
						// 	item.propertyList.some(spc => {
						// 		this.$set(spc, 'curIndex', 0)
						// 	})
						// })
						// this.getSkuValue()
					}
				})
			},


			addCart: function(e) { //加入购物车
				if (!this.curSku.id) {
					uni.showToast({
						title: '请选择规格',
						icon: 'none'
					});
					return
				}
				this.$api.cartAdd({
					skuId: this.curSku.id,
					count: this.skuNum
				}, res => {
					if (res.code == 200) {

						uni.showToast({
							title: '添加成功',
							icon: 'none'
						});
					} else {

						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				})
			},
			buyNow: function() { //立即购买

				if (!this.curSku.id) {
					uni.showToast({
						title: '请选择规格',
						icon: 'none'
					});
					return
				}
				this.$api.buyNow({
					skuId: this.curSku.id,
					count: this.skuNum
				}, res => {
					if (res.code == 200) {
						let ids = res.data
						this.$api.orderCheckSettlement({
							cartIds: ids,
						}, res => {
							if (res.code == 200) {

								uni.navigateTo({
									url: '/pages/product/confirm?cartIds=' + ids
								})
							} else {

								uni.showToast({
									title: res.msg,
									icon: 'none'
								});
							}
						})

					} else {

						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})

			},
		}
	}
</script>

<style lang="scss">
	
	.btn-sure {
	
		width:520rpx;
		text-align: center;
		background: #70B52C;
		padding: 24rpx 0;
		font-size: 28rpx;
		color: #FFFFFF;
		border-radius: 10px;
		font-weight: normal;
	}
	
	.vip-tips {
		height: 68rpx;
		background: linear-gradient(135deg, #F8F7F6 0%, #FDEDDA 50%, #FAE2DB 100%);
	}

	.ic-video {
		position: absolute;
		top: 50%;
		left: 50%;
		font-size: 60rpx;
		z-index: 2;
		font-size: 80rpx;
		transform: translate(-50%, -50%);
	}

	.module-action {
		position: fixed;
		top: 36px;
		left: 0;
		right: 0;
		z-index: 10;
	}

	.act-block {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 64rpx;
		height: 64rpx;
		font-size: 36rpx;
		border-radius: 50%;
		background: rgba(0, 0, 0, 0.1);
	}

	.btn-diy {
		background: #76BC21;
		border-radius: 16rpx;
		padding: 26rpx 28rpx;
	}

	.btn-store {
		background: #F4F4F4;
		padding: 20rpx 10rpx;
	}

	.sku-item {
		border-radius: 8rpx;
		border: 1px solid #888;
		width: 200rpx;
		padding: 10rpx;
		color: #888;
		font-size: 24rpx;
		text-align: center;
		margin-top: 24rpx;
		margin-right: 24rpx;

		&.on {
			border: 1px solid #70B52C;
			color: #70B52C;
		}
	}

	.spec-diy {
		min-height: 300rpx;

		.sku-item {
			border: none;
			background: rgba(25, 41, 28, 0.05);
			color: #19291C;
			padding: 40rpx 20rpx;
		}
	}
</style>